<!-- 电表详情 -->
<template>
    <div class="echart" id="revenueEcharts" :style="myChartStyle" ref="chartRef"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'revenueEcharts',
    components: {},
    data() {
        return {
            data: [
                {value: 25, name: '支付宝', itemStyle: {color: '#4fc8b5'}},
                {value: 25, name: '柜台', itemStyle: {color: '#efd14b'}},
                {value: 25, name: '一卡通', itemStyle: {color: '#70b6fb'}},
                {value: 25, name: '银联', itemStyle: {color: '#7102fe'}},
                {value: 25, name: '微信', itemStyle: {color: '#0068ca'}}
            ], //横坐标
            myChartStyle: {float: 'left', width: '100%', height: '144px', marginTop: '10px'} //图表样式
        }
    },
    computed: {},
    created() {},
    watch: {},
    mounted() {
        this.initEcharts()
    },
    updated() {},
    methods: {
        initEcharts() {
            // 基本柱状图
            const option = {
                // backgroundColor: '#000', // 深色背景
                color: ['#fff'],
                grid: {
                    left: '120px',
                    right: '60px',
                    bottom: '10px',
                    top: '-20px'
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['65%', '85%'], // 环形半径
                        center: ['50%', '50%'], // 中心位置
                        data: this.data,
                        label: {
                            // formatter: '{b}: {d}%', // 显示名称和百分比
                            formatter: (params) => {
                                // 动态设置文字颜色为饼图对应扇区的颜色
                                return `{d|${params.percent}%}\n${params.name}`
                            },
                            rich: {
                                // b: {
                                //   color: () => "rgba(255,255,255,0.8)", // 使用饼图扇区的颜色
                                //   fontSize: 16,
                                //   // fontWeight: 'bold'
                                // },
                                d: {
                                    color: (params) => params.data.itemStyle.color, // 使用饼图扇区的颜色
                                    fontSize: 16,
                                    lineHeight: 24 // 设置行高
                                }
                            },
                            color: 'rgba(255,255,255,0.8)',
                            position: 'outside'
                        },
                        labelLine: {
                            length: 40
                            // lineStyle: { color: '#666' }
                        }
                    }
                ],
                graphic: [
                    {
                        type: 'text',
                        left: 'center',
                        top: 'center',
                        style: {
                            text: '3736',
                            color: '#52c9ca',
                            fontSize: 20,
                            fill: '#52c9ca', // 中间数字颜色
                            fontWeight: 'bold'
                        }
                    }
                    // {
                    //   type: 'text',
                    //   left: 'center',
                    //   top: 'center',
                    //   style: {
                    //     text: '支付营收',
                    //     fontSize: 14,
                    //     fill: '#fff',
                    //     top: 'center+40' // 调整位置在数字下方
                    //   }
                    // }
                ]
            }
            const myChart = echarts.init(document.getElementById('revenueEcharts'))
            myChart.setOption(option)
            //随着屏幕大小调节图表
            window.addEventListener('resize', () => {
                myChart.resize()
            })
        }
    }
}
</script>

<style scoped>
#revenueEcharts {
    background-size: 93px 89px;
    background-repeat: no-repeat;
    background-position: center center;
    /* background-image: url("../../../../assets/images/index/largeScreen/black.jpg"); */
}
</style>
